<template>
  <view class="container">
    <view class="login-card">
      <view class="title">登录</view>
      <view class="form-group">
        <input 
          class="input" 
          placeholder="请输入用户名" 
          v-model="username"
        />
      </view>
      <view class="form-group">
        <input 
          class="input" 
          type="password" 
          placeholder="请输入密码" 
          v-model="password"
        />
      </view>
      <button class="submit-btn" type="primary" @click="handleLogin">登录</button>
      
      <!-- 新增城市探索跳转按钮 -->
      <button class="explore-btn" @click="navigateToCityExplore">城市探索</button>
	  
      <navigator url="/pages/register/register" class="link">没有账号？去注册</navigator>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      username: '',  // 用户名
      password: ''   // 密码
    };
  },
  methods: {
    // 登录点击事件处理
    handleLogin() {
      // 表单验证
      if (!this.username) {
        uni.showToast({
          icon: 'none',
          title: '请输入用户名',
          duration: 2000
        });
        return;
      }
      
      if (!this.password) {
        uni.showToast({
          icon: 'none',
          title: '请输入密码',
          duration: 2000
        });
        return;
      }
      
      // 显示登录加载状态
      uni.showLoading({
        title: '登录中', 
        mask: true 
      });
      
      // 模拟登录请求（实际项目中替换为真实接口调用）
      setTimeout(() => {
        uni.hideLoading();
        
        // 这里可以添加真实的登录逻辑判断
        // 例如调用登录接口，根据返回结果处理
        uni.reLaunch({
          url: "/pages/login/login",
          success() {
            uni.showToast({
              icon: "success",
              title: '登录成功',
              duration: 2000
            });
          }
        });
      }, 2000);
    },
    
    // 跳转到城市探索页面
    navigateToCityExplore() {
      uni.navigateTo({
        url: "/pages/urbanexploration/urbanexploration"
      });
    }
  }
}
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f7f7f7;
}
.login-card {
  width: 85%;
  background-color: #fff;
  padding: 40rpx;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40rpx;
}
.form-group {
  margin-bottom: 30rpx;
}
.input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
}
.submit-btn {
  width: 100%;
  border-radius: 8rpx;
}
/* 城市探索按钮样式 */
.explore-btn {
  width: 100%;
  border-radius: 8rpx;
  margin-top: 20rpx;
  background-color: #4CD964;
}
.link {
  display: block;
  text-align: center;
  margin-top: 30rpx;
  font-size: 28rpx;
  color: #007AFF;
}
</style>

